<!--
数据
{
    method:"post",
    url:"magical_lowcode/openapi/crud/hdy/list",
    params:[],
    filed:""
}
废弃
-->

<template>
  <div class="mc-api-param">
        <el-form label-width="30px" size="mini">
          <el-form-item label="地址">
             <el-row>
                 <el-col :span="6">
                    <el-select v-model="form.method">
                         <el-option value="post" label="post"></el-option>
                         <el-option value="get" label="get"></el-option>
                     </el-select>
                 </el-col>
                 <el-col :span="18"><el-input v-model="form.url"/></el-col>
             </el-row>
          </el-form-item>
          <el-form-item label="参数" v-if="!form.params || form.params.length<=0 ">
               <el-button size="mini" @click="addParam(0)">新增</el-button>
          </el-form-item>
          <el-form-item :label="'参数'+idx" v-for="(item,idx) in form.params" :key="item.uuid">
              <el-row>
                <el-col :span="16">
                    <el-select v-model="item.name" filterable allow-create>
                        <el-option v-for="(it,i) in fields" :key="it.name" :label="it.title" :value="it.name"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="8">
                     <el-select v-model="item.compare">
                        <el-option v-for="(item,idx) in compares" :key="item.l" :label="item.l" :value="item.k"></el-option>
                     </el-select>
                </el-col>
                <el-col :span="16">
                     <el-input v-model="item.value" v-if="item.compare!='isnull'&&item.compare!='isnotnull'" placeholder="参数值"/>
                </el-col>
                <el-col :span="8">
                     <el-button size="mini" @click="addParam(idx)">+</el-button>
                     <el-button size="mini" @click="deleteParam(idx)">-</el-button>
                </el-col>
              </el-row>
          </el-form-item>
        </el-form>
  </div>
</template>

<script>
export default {
    name: 'mc-api-param',
    data () {
        return {
            form:this.data,
            compares:[
               {k:"=",l:"等于"},
               {k:"<",l:"小于"},
               {k:"<=",l:"小于等于"},
               {k:">",l:"大于"},
               {k:">=",l:"大于等于"},
               {k:"!=",l:"不等于"},
               {k:"between",l:"between数组"},
               {k:"like",l:"包含like"},
               {k:"not like",l:"不包含"},
               {k:"in",l:"IN"},
               {k:"not in",l:"NOT IN"},
               {k:">>",l:"右移"},
               {k:"<<",l:"左移"},
               {k:"isnull",l:"为空"},
               {k:"isnotnull",l:"不为空"},
           ],
        }
    },
    props:["fields","data"],
    watch:{

    },
    mounted () {
        if(!this.form.params){
            this.form.params = [];
        }
    },
    methods:{
        buildOneParam:function(){
            return {uuid:new Date().getTime(),name:"",compare:"=",value:""}
        },
        addParam:function(idx){
            this.form.params.splice(idx+1,0,this.buildOneParam())
        },
        deleteParam:function(idx){
            this.form.params.splice(idx,1)
        },
        chooseName:function(command,item){
            item.name=command
        }
    }
}
</script>

<style lang="scss">
    .mc-api-param {
        .el-form-item{
            margin-top:10px;
        }
        .el-select{
            width:99%;
        }
    }

</style>
